<template>
  <div>
    <!-- 插值表达式，会对于内容中的html进行转义，好处：安全，防止一些恶意前端攻击 -->
    <div>{{ title }}</div>
    <hr />
    <!-- 以v-开头的自定义属性，称之为，指令 -->
    <!-- 会对于内容中的html进行转义，好处：安全，防止一些恶意前端攻击 -->
    <div v-text="title"></div>
    <hr />
    <!-- 不会对html内容进行转义，好处：解析html，坏处：有安全隐患（xss攻击） -->
    <div v-html="title"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 有html标签的内容
      title: "<h3>你好世界</h3>",
    };
  },
};
</script>

<style lang="scss">
</style>
